<template>
  <sky-base-page padding="0" bgPageColor="#f3f8f5">
    <view class="form-card">
      <uni-forms class="bang-form" ref="formRef" :model="form"
                 label-position="top" label-width="400rpx" err-show-type="toast">
        <uni-forms-item name="lifePhotos" label="地址">
          <view v-if="form.province" class="input-box" @tap="openCityPicker">
            {{ form.province }}{{ form.city }}{{ form.district }}
          </view>
          <view v-else class="input-box" @tap="openCityPicker">
            点击选择位置
          </view>
        </uni-forms-item>
        <uni-forms-item name="address" label="地址">
            <up-textarea v-model="form.address" placeholder="请输入地址" ></up-textarea>
        </uni-forms-item>
      </uni-forms>
    </view>
    <template #footer>
      <view class="login-btn" @click="qly.form.pass(submit,formRef)">
        保 存
      </view>
    </template>
  </sky-base-page>

  <!--  选择省市区-->
  <qly-city-picker :mask-close-able="true" @confirm="confirm" @cancel="cancel"
                   :visible="visible"/>
</template>
<script setup>
const formRef = ref()
const form = ref({
  province: '',
  city: '',
  district: '',
  address: ''
})
const visible = ref(false)

const openCityPicker = () => {
  visible.value = true
}

const cancel = () => {
  visible.value = false
}

// 确认省市区
const confirm = (val) => {
  console.log('val', val)
  form.value.province = val.provinceName
  form.value.city = val.cityName
  form.value.district = val.areaName
  visible.value = false
}
// 保存
const submit = async () => {
  if(!form.value.province){
    return qly.dialog.error('请选择位置')
  }
  const res = await qly.api.user.agent(form.value)
  if (res.code === 1) {
    uni.$emit('agentSuccess')
    qly.dialog.success('申请成功')
    setTimeout(()=>{
      uni.navigateBack()
    },1500)
  } else {
    qly.dialog.apiError(res).catch()
  }
}
</script>
<style lang="scss" scoped>
.header-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 400rpx;
  padding: 0 32rpx;
  box-sizing: border-box;

  .left-box {
    .hello {
      font-family: D-DIN-DIN, D-DIN-DIN;
      font-weight: bold;
      font-size: 80rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      color: #293845;
    }

    .desc {
      color: #293845;
      font-weight: bold;
      font-size: 34rpx;
    }
  }

  .logo-phone {
    width: 160rpx;
    height: 160rpx;
    border-radius: 12rpx;
  }
}

.form-card {
  width: 92%;
  margin: 20rpx auto;
  padding: 32rpx;
  box-sizing: border-box;
  border-radius: 18rpx;
  background-color: #fff;
}

.bang-form {
  flex: 1;
  overflow: auto;
}

.yuan-phone {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.login-btn {
  color: #fff;
  width: 90%;
  height: 96rpx;
  background: #00C76A;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 30rpx;
  margin: 0 auto;
}

.input-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48rpx 0 24rpx;
  width: 100%;
  height: 80rpx;
  background: #F5F5F5;
  border-radius: 16rpx;
  font-size: 32rpx;
  box-sizing: border-box;

  input{
    width: 100%;
  }
  .code-box {
    margin-right: 50rpx;
  }
}
</style>
